﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/css/table.css" rel="stylesheet" />
<div id="app">
    <!-- 表格部分 -->
    <table width="100%">
        <tr>
            <td>
                <p color="black">您正在做的业务是:人力资源--权限管理--添加用户</p>
            </td>
        </tr>
        <tr>
            <td>
                <div align="right">
                    <input type="button" value="保 存" v-on:click="addRole()" class="BUTTON_STYLE1">
                    <input type="button" value="返回" class="BUTTON_STYLE1" v-on:click="goBack()">
                </div>
            </td>
        </tr>
    </table>
    <table width="100%" border="1" cellpadding=0 cellspacing=1
           bordercolorlight=#848284 bordercolordark=#eeeeee
           class="TABLE_STYLE1">
        <tr>
            <td width="10%" class="TD_STYLE1">
                角色编号
            </td>
            <td width="40%" class="TD_STYLE2">
                <el-input style="width: 240px" v-model="roleData.rolesID" disabled />
            </td>
            <td width="10%" class="TD_STYLE1">
                角色名称
            </td>
            <td class="TD_STYLE2">
                <el-input style="width: 240px" v-model="roleData.rolesName" />
            </td>
        </tr>
        <tr>
            <td width="10%" class="TD_STYLE1">
                角色说明
            </td>
            <td class="TD_STYLE2">
                <el-input style="width: 240px" v-model="roleData.rolesInstruction" />
            </td>
            <td width="10%" class="TD_STYLE1">
                是否可用
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="roleData.rolesIf"
                           placeholder="请选择"
                           size="large"
                           style="width: 240px">
                    <el-option v-for="item in options"
                               :label="item.text"
                               :value="item.value" />
                </el-select>
            </td>
        </tr>
    </table>
    <table width="100%" class="grandfather">
        <tr>
            <td>
                <table id="checkbox-tree" class="parent" width="100%">
                    <template v-for="(item, index) in treeData.data">
                        <tr v-if="item">
                            <!-- 增加条件判断，确保 item 存在 -->
                            <td style="width:100%">
                                <hr style="width:100%" />
                                <input type="checkbox" v-model="item.checked" :value="item.nane" v-on:change="toggleParent(item)" :checked='checked'>&nbsp;&nbsp;{{ item.name }}
                                <table class="child-table">
                                    <template v-for="(subItem, subIndex) in item.shuZhuangTu">
                                        <tr>
                                            <td style="padding-left: 20px;">
                                                <input type="checkbox" v-model="subItem.checked" :value="subItem.nane" v-on:change="handleSubItemChange(subItem, item)">
                                                <!-- 增加条件判断，确保 subItem 存在 -->
                                                <template v-if="subItem">
                                                    {{ subItem.name }}
                                                </template>
                                                <table class="grandchild-table">
                                                    <template v-for="(innerItem, innerIndex) in subItem.shuZhuangTu">
                                                        <td style="padding-left: 40px;">
                                                            <input type="checkbox" v-model="innerItem.checked" :value="innerItem.nane" v-on:change="handleInnerItemChange(innerItem, subItem, item)">
                                                            <!-- 增加条件判断，确保 innerItem 存在 -->
                                                            <template v-if="innerItem">
                                                                {{ innerItem.name }}
                                                            </template>
                                                        </td>
                                                    </template>
                                                </table>
                                            </td>
                                        </tr>
                                    </template>
                                </table>
                            </td>
                        </tr>
                    </template>
                </table>
            </td>
        </tr>
    </table>
</div>
<script>
    const { createApp, ref, reactive, computed, watchEffect } = Vue;
    /**
     * 创建应用实例
     */
    var app = createApp({
        setup() {
            // 定义数据
            const treeData = reactive({ data: [] });
            const isLoading = ref(true);  // 加载状态
            // 解析 URL 参数获取数据
            const urlParams = new URLSearchParams(window.location.search);
            const rowData = JSON.parse(urlParams.get('rol'));
            const data = ref([])
            const roleData = reactive({
                rolesID: rowData.rolesID,
                rolesIf: rowData.rolesIf,
                rolesInstruction: rowData.rolesInstruction,
                rolesName: rowData.rolesName
            });
            const options = [
                { text: "True", value: "True" },
                { text: "False", value: "False" }
            ];
            const juriIDs = ref([]); // 明确将 juriIDs 初始化为一个空数组
            /**
             * 保存
             */
            function addRole() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

                // 删除 RolesJurisdiction 表  
                const deleteRolesJurisdictionPromise = axios.post('/DeleteRolesJurisdiction', {
                    rid: roleData.rolesID,
                });

                // 获取选中的值  
                const selectedValues = getSelectedValues();
                console.log('选中的值:', selectedValues);

                // 使用 map 创建所有添加权限的请求 Promise 数组  
                const addRolesJurisdictionPromises = selectedValues.map(value => {
                    return axios.post('/AddRolesJurisdiction', {
                        rid: roleData.rolesID,
                        jid: value
                    });
                });

                // 更新角色的请求 Promise  
                const updateRolesPromise = axios.post('/Roles/RolesUpDate', {
                    rolesID: roleData.rolesID,
                    rolesName: roleData.rolesName,
                    rolesInstruction: roleData.rolesInstruction,
                    rolesIf: roleData.rolesIf
                });

                // 等待所有请求完成  
                Promise.all([deleteRolesJurisdictionPromise, ...addRolesJurisdictionPromises, updateRolesPromise])
                    .then(responses => {
                        // 所有请求成功后执行  
                        console.log('所有请求成功:', responses);
                        window.location.href = `/Roles/Index`;
                    })
                    .catch(error => {
                        // 处理错误  
                        if (error.response && error.response.status === 400) {
                            alert('请求参数错误，请检查！');
                        } else if (error.response && error.response.status === 500) {
                            alert('服务器内部错误，请稍后再试！');
                        } else {
                            alert('更新角色失败，请稍后再试');
                        }
                        console.error('更新角色时发生错误:', error);
                    });
            }

            /**
             * 获取树形数据的函数
             */
            function fetchTreeData() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/GetRolesJurisdiction', {
                    rid: roleData.rolesID
                }).then(res => {
                    data.value = res.data; // 将返回的数据存储在 ref 中  
                    juriIDs.value = data.value.map(item => item.juriID); // 初始化 juriIDs
                })
                axios.post('/ShuZhuangTu')
                    .then(res => {
                        treeData.data = res.data;
                        console.log(treeData.data)
                        isLoading.value = false;
                        // 在这里手动设置复选框的初始选中状态
                        treeData.data.forEach(item => {
                            item.checked = juriIDs.value.includes(item.id);
                            item.shuZhuangTu.forEach(subItem => {
                                subItem.checked = juriIDs.value.includes(subItem.id);
                                subItem.shuZhuangTu.forEach(innerItem => {
                                    innerItem.checked = juriIDs.value.includes(innerItem.id);
                                });
                            });
                        });
                    })
                    .catch(error => {
                        console.error('获取树形数据时发生错误:', error);
                        alert('获取树形数据失败，请稍后再试');
                    });

                
            }
            //一级菜单选中
            function toggleParent(item) {
                console.log(item.checked)
                // 如果父项选中，则将所有子项选中，否则取消选中
                item.shuZhuangTu.forEach(subItem => {
                    subItem.checked = item.checked;

                    // 对于每个子项也需要处理孙子项
                    subItem.shuZhuangTu.forEach(innerItem => {
                        innerItem.checked = item.checked;
                    });
                });
            }
            //二级菜单选中
            function handleSubItemChange(subItem, item) {
                if (!subItem.checked) {
                    // 检查是否有其他二级项被选中
                    const hasCheckedSubItems = item.shuZhuangTu.some(otherSubItem => otherSubItem.checked); // 确保这里使用 checked

                    // 如果没有其他二级项被选中，取消选中父项
                    if (!hasCheckedSubItems) {
                        item.checked = false; // 取消选中父项
                    }
                } else {
                    // 如果当前二级项被选中，确保父项也被选中
                    item.checked = true; // 选中父项
                }
                subItem.shuZhuangTu.forEach(innerItem => {
                    innerItem.checked = subItem.checked;
                });
            }
            //三级菜单选中
            function handleInnerItemChange(innerItem, subItem, item) {
                // 在取消选中时检查是否还有其他选中的三级项
                if (!innerItem.checked) {
                    // 检查是否有其他三级项被选中
                    const hasCheckedSubItems = subItem.shuZhuangTu.some(otherSubItem => otherSubItem.checked); // 确保这里使用 checked

                    // 如果没有其他二级项被选中，取消选中父项
                    if (!hasCheckedSubItems) {
                        subItem.checked = false; // 取消选中父项
                        item.checked = false;
                    }
                } else {
                    // 如果当前二级项被选中，确保父项也被选中
                    subItem.checked = true; // 选中父项
                    item.checked = true;
                }
                //subItem.checked = innerItem.checked;
                //item.checked = innerItem.checked;

            }
            //获取多选框选中的值
            function getSelectedValues() {
                const selectedValues = [];

                treeData.data.forEach(item => {
                    // 检查父项是否被选中
                    if (item.checked) {
                        selectedValues.push(item.id); // 收集父项的名称（或其他您需要的属性）
                    }

                    item.shuZhuangTu.forEach(subItem => {
                        // 检查二级项是否被选中
                        if (subItem.checked) {
                            selectedValues.push(subItem.id); // 收集二级项的名称
                        }

                        // 检查孙子项
                        subItem.shuZhuangTu.forEach(innerItem => {
                            if (innerItem.checked) {
                                selectedValues.push(innerItem.id); // 收集孙子项的名称
                            }
                        });
                    });
                });

                return selectedValues;
            }
            // 调用获取数据的函数
            fetchTreeData();
            //返回
            function goBack() {
                history.back();
            }
            return {
                roleData,
                options,
                addRole,
                isLoading,
                treeData,
                handleSubItemChange,
                handleInnerItemChange,
                toggleParent,
                data,
                juriIDs,
                goBack
            };
        }
    });
    app.use(ElementPlus);
    app.mount("#app");
</script>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

    .grandchild-table span {
        display: inline-block;
    }
</style>